<template>
    <div class="question-container">
        <!-- 做题页面 -->
        <question-list
            v-for="(question, index) in questions"
            :key="index"
            :questionType="question.questionType"
            :questionText="index + 1 + '.' + question.statement"
            :options="question.questionOptions"
            :correctAnswer="question.correctOptions"
            :standardAnswer="question.answers"
        />
    </div>
</template>

<script>
import QuestionList from "../components/QuestionList";
import { getQuestion } from "../api/index";

export default {
    name: "question",
    components: {
        QuestionList,
    },
    data() {
        return {
            questions: [],
            articleContentId: "",
        };
    },
    created() {
        // 从路由中获取参数
        this.articleContentId = this.$route.params.id;
        this.getQuestionContent(this.articleContentId);
    },
    methods: {
        /**
         * 根据文章id获取题目
         */
        getQuestionContent(id) {
            getQuestion(id)
                .then((res) => {
                    this.questions = res.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/question.scss";
</style>
